<template>
    <div>
        <el-button type="primary" @click="switchChartType">切换图表类型</el-button>
        <div ref="comparechart" :style="{ width: '100%', height: '400px' }"></div>
        <div class="card">
        <div class="indent">
            特斯拉于2014年进入中国市场，后来由于技术领先成为新能源车的龙头，
            比亚迪由于转向新能源车时间比较晚，因此2018-2020年的总体销量比
            不过特斯拉。2019年特斯拉在上海投资“超级工厂”后，极大的激发了
            国内新能源车车企造车的积极性和主动性，比亚迪在2022年3月起便
            停售所有的燃油车，全面转向新能源车，因此2021年至今比亚迪的
            新能源汽车由于价格低、性能好，性价比相较于特斯拉而言要高，
            契合中国消费市场，因此销量一飞冲天。“比亚迪现象”只是我国新能
            源汽车 发展中的一个缩影，展现了我国新能源汽车的技术由买到自主
            研发再到引领市场的过程，相信未来以比亚迪为首的中国新能源车企会
            在新能源车领域继续引领时代的发展。
        </div>
      </div>
    </div>

</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';
export default {
    name: 'TaskOne',
    data() {
        return {
            typeKey: 'line', // 初始化为折线图表类型
            currentOption: this.lineption, // 初始化为地图图表配置
            chartInstance: null, // ECharts 实例
            dates: [],
            datevalues: [], // 对应的数据值数组
            brands: [],
            brandvalues: [],
            lineoption: {
                title: {
                    text: '比亚迪和特斯拉销售数据对比',
                    left: 'center',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    name: '月份', // 添加X轴名称
                    data: ["点1", "点2", "点3", "点4", "点5"],
                    axisLabel: { // 添加X轴标签
                        show: true,
                        interval: 0, // 显示所有标签
                        rotate: 45, // 旋转标签以适应空间
                    }
                },
                yAxis: [
                {
           type: 'value',

       }
                ],
                series: [
                    {
                        name: '比亚迪',
                        id:'byd',
                        type: 'line',
                        universalTransition: { // 添加此配置
                enabled: true,
                divideShape: 'clone'
            },
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        smooth: true, // 开启平滑曲线
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '特斯拉',

                        type: 'line',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        universalTransition: { // 添加此配置
                enabled: true,
                divideShape: 'clone'
            },
                        smooth: true, // 开启平滑曲线
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                ]
            },
            baroption: {
                title: {
                    text: '比亚迪和特斯拉销售数据对比',
                    left: 'center',
                },
                xAxis: {
                    data: ['Animals', 'Fruits']
                },
                yAxis: {},
                dataGroupId: '',
                animationDurationUpdate: 500,
                series: {
                    type: 'bar',
                    id: 'byd',
                    data: [120, 200],
                    universalTransition: {
                        enabled: true,
                        divideShape: 'clone'
                    }
                }
            }
        };
    },
    mounted() {
        this.GetData()
    },
    methods: {
        switchChartType() {
        if (this.typeKey === 'line') {
            this.typeKey = 'bar';
            this.currentOption = this.baroption;
        } else {
            this.typeKey = 'line';
            this.currentOption = this.lineoption;
        }
        
        // 确保图表实例已经初始化
        if (!this.chartInstance) {
            this.chartInstance = echarts.init(this.$refs.comparechart);
        }
        
        // 动态设置选项，自动处理动画过渡
        this.chartInstance.setOption(this.currentOption);
    },
        GetData() {
            const getOptions = {
                method: 'GET',
                url: '/api/task5/compare',
            };

            axios(getOptions)
                .then(response => {
                    console.log('Received data:', response.data);
                    this.dates = response.data.data.dates;
                    this.datevalues = response.data.data.dateValues;
                    this.brands = response.data.data.brandNames;
                    this.brandvalues = response.data.data.brandValues;
                    this.lineoption.xAxis.data = response.data.data.dates;
                    this.lineoption.series[0].data = this.datevalues[0];
                    this.lineoption.series[1].data = this.datevalues[1];
                    this.baroption.xAxis.data = this.brands;
                    this.baroption.series.data = this.brandvalues;
                    this.switchChartType();
                })
                .catch(error => {
                    console.error('Error fetching word cloud data:', error);
                });
        },
    }
};
</script>


<style>
.card {
  background-color: rgb(221, 218, 218);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 10px;
  max-width: 80%;
  flex-grow: 1;
  /* 让卡片自动填充容器宽度 */
  /* 如果需要限制卡片最大宽度以防止过度拉伸，可以添加如下属性：
  max-width: 25%; // 或者根据实际需要设定其他百分比
  */
  display: flex;
  flex-direction: column;
  position: relative;
  top: 0px;
  /* 向下移动10像素 */
  left: 100px;
  /* 向右移动20像素 */
  /* 保证卡片内部元素垂直排列 */
}</style>